<template>
    <qly-base-page :title="$t('common.userInfo')" ref="skyBasePageRef" bg-page-color="#fff">
        <tr-card margin="0">
            <up-cell-group>
                <up-cell :title="$t('common.name')" isLink>
                    <template #value>
                        <text class="u-slot-value" @tap="openUpdateAttr(UserInfoAttrEnum.name.value)">张三</text>
                    </template>
                </up-cell>
                <up-cell :title="$t('common.role')">
                    <template #value>
                        <text class="u-slot-value">张三</text>
                    </template>
                </up-cell>
                <up-cell :title="$t('common.mobile')">
                    <template #value>
                        <text class="u-slot-value">张三</text>
                    </template>
                </up-cell>
                <up-cell :title="$t('common.language')" isLink>
                    <template #value>
                        <text class="u-slot-value" @tap="selectLanguage">张三</text>
                    </template>
                </up-cell>
                <up-cell :title="$t('common.sex')" isLink>
                    <template #value>
                        <text class="u-slot-value" @tap="updateSex">张三</text>
                    </template>
                </up-cell>
                <up-cell :title="whatsAppLabel" isLink>
                    <template #value>
                        <text class="u-slot-value" @tap="openUpdateAttr(UserInfoAttrEnum.whatsApp.value)">张三</text>
                    </template>
                </up-cell>
                <up-cell title="Line" isLink>
                    <template #value>
                        <text class="u-slot-value" @tap="openUpdateAttr(UserInfoAttrEnum.line.value)">张三</text>
                    </template>
                </up-cell>
                <up-cell :title="$t('common.email')" isLink>
                    <template #value>
                        <text class="u-slot-value" @tap="openUpdateAttr(UserInfoAttrEnum.email.value)">张三</text>
                    </template>
                </up-cell>
                <up-cell :title="$t('common.weChat')" isLink>
                    <template #value>
                        <text class="u-slot-value" @tap="openUpdateAttr(UserInfoAttrEnum.weChat.value)">张三</text>
                    </template>
                </up-cell>
            </up-cell-group>
        </tr-card>
        
        <qly-select-picker ref="languagePopupRef" :options="options" :multiple="true"
                           :search="false" :title="$t('common.language')" @confirm="confirm"/>
        <template #footer>
            <view class="btn-box">
                <up-button color="#2979ff" :text="$t('common.exit')" @tap="exitLogin"></up-button>
                <up-button type="error" plain :text="$t('common.logout')" @tap="logoutLogin"></up-button>
            </view>
        
        </template>
    </qly-base-page>
    
    <!--    修改信息-->
    <update-info-attr ref="updateAttrRef"/>
    
    <!--    修改性别-->
    <qly-message-select ref="qlyMessageSelectRef"/>
</template>
<script setup>
import UpdateInfoAttr from './components/updateInfoAttr.vue'
import {UserInfoAttrEnum} from '@/enums/user'

const languagePopupRef = ref()
const updateAttrRef = ref(null)
const qlyMessageSelectRef = ref(null)
const whatsAppLabel = computed(() => {
    return 'WhatsApp' + $t('common.groupLink')
})

const options = [
    {
        label: 'WhatsApp群链接',
        value: 'whatsApp'
    },
    {
        label: 'Line',
        value: 'line'
    },
    {
        label: '邮箱',
        value: 'email'
    },
    {
        label: '微信',
        value: 'weChat'
    }
]

const selectLanguage = () => {
    languagePopupRef.value.open(['line'])
}

const confirm = (e) => {
    console.log('e', e)
}

// 打开修改姓名弹窗
const openUpdateAttr = (attr) => {
    updateAttrRef.value.open(attr)
}

// 打开修改性别弹窗
const updateSex = async () => {
    const result = await qly.dialog.messageSelect({
        data: [{
            label: '男',
            value: 1
        },
            {
                label: '女',
                value: 2
            }]
    })
    
    console.log('result', result)
}

// 退出登录
const exitLogin = async () => {
    const res = await qly.dialog.messageBox({
        title: $t('common.tips'),
        message: $t('common.sureLogout'),
    })
    if (res) {
        qly.page.open('/pages/my/login/index')
    }
}
// 注销账号
const logoutLogin = async () => {
    const res = await qly.dialog.messageBox({
        title: $t('common.tips'),
        message: $t('common.sureCancelAccount'),
    })
    if (res) {
        qly.page.open('/pages/my/login/index')
    }
}
</script>
<style scoped lang="scss">
.btn-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12rpx 24rpx;
}
</style>
